<template>
	<view class="page">
		<cu-custom bgColor="bg-white"  :isBack="true"><block slot="content">购买记录</block></cu-custom>
		<mescroll-uni ref="mescrollRef" @init="mescrollInit" height="95%" top="20" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback" @emptyclick="emptyClick">
			<view v-for="(item, index) in orderList" :key="index">
				<view class="cu-list menu card-menu margin-top-sm margin-left-sm margin-right-sm padding-bottom overHidden" @tap="goOrderDetail(item.order_sn)">
					<view class="cu-item">
						<view class="flex align-center justify-between" style="width: 100%;">
							<view class="flex align-center text-333">
								<text class="title_line_1" style="flex:1; line-height: 32rpx;max-width: 400rpx;">订单编号：</text>
								<text class="text-df">{{item.order_sn}}</text>
							</view>
							<view class="text-theme text-df">{{item.order_status_text}}</view>
						</view>
					</view>
					<view class="cu-item padding" style="align-items: flex-start;flex-wrap: wrap;padding-bottom: 20rpx;border-radius: 20rpx;">
						<view class="cu-avatar radius activityImg" :style="'background-image:url('+item.active_face+');'"></view>
						<view class="content flex-direction margin-left" style="align-items: flex-start;flex-wrap:wrap;width: 100%;height: 180rpx;">
							<view class="flex-column justify-start" style="width:100%;">
								<view class="text-df title_line_1" style="line-height: 32upx;font-weight: 400;">{{item.active_title}}</view>
							</view>
							<view class="text-999 text-sm margin-top-sm" style="display: flex;flex-direction: column; align-items: flex-start;">
								<!-- <text class="tips" v-for="(key,index1) in checkGiftDesc(item.gift_desc)" :key="index1">{{key}}</text> -->
								<!-- <text class="tips">{{checkGiftDesc(item.gift_desc)}}</text> -->
								<!-- <text class="tips"> 价值2999的贵州旅游服务   x1</text> -->
								<view class="tips" v-html="checkGiftDesc(item.gift_desc)"></view>
							</view>
						</view>
						<view class="flex text-sm flex justify-between align-center " style="width: 100%;vertical-align: bottom;">
							<view class="text-333 text-sm text-fw500" style="margin-left: 6upx;">实付款</view>
							<view class="text-lg" style="color:#F2854C ;">￥{{item.pay_money | formatPrice}}</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-uni>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import MescrollMoreItemMixin from "@/components/mescroll-uni/mixins/mescroll-more-item.js";
	import * as activity_API from '@/api/tour.js'
	import * as Trade_API from '@/api/trade.js' 
	import * as Pay_API from '@/api/pay.js'
	import * as Foundation from '@/utils/Foundation.js'
	let client_type = 'MINI'
	export default {
		mixins: [MescrollMixin,MescrollMoreItemMixin], 
		data() {
			return {
				downOption:{
					auto:false // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption:{
					auto:false,
					noMoreSize: 8, //列表的总数量要大于半页才显示无更多数据;默认5
					empty:{
						icon:'/static/images/empty/empty_order.png',
						tip: '暂未查询到相关订单'
					}
				},
				active:0,
				menuList:[
					{title:"全部",tag:''},
					{title:"未支付",tag:'wait_pay_num'},
					{title:"待发货",tag:'wait_ship_num'},
					{title:"待收货",tag:'wait_rog_num'},
					{title:"待评价",tag:'wait_comment_num'},
					{title:"售后",tag:''},
				],
				orderList:[],
				params:{
					page_no:1,
					page_size:20,
					order_status:'VALID'
				},
				count:0,
				isEdit:false,
				type:'',
				orderStatus:uni.getStorageSync('orderStatus')||{},
				izmember:uni.getStorageSync('role').id?true:false,
				finished:false,
				loadingText:'加载完毕',
				keyword: '',
				searchStatus: false,
				cancelshowModal:false,
				cancelReason:'',
				checkActive:1,
				cancelReasonList:[
					{name:'缺货少件'},
					{name:'不想要了'},
					{name:'商品降价'},
					{name:'发错货'},
					{name:'质量问题哦'},
					{name:'商品与页面描述不符'},
					{name:'商品损坏'},
					{name:'商品质量问题'},
					{name:'物流问题'},
					{name:'商品严重损坏'},
					{name:'协商退货'},
				],
				selextedSN:'',
				loading:false,
				checkActive:0,
				izreturn:false,
				intro:''
			}
		},
		watch:{
			active(newVal) {
				this.active = newVal
				if(this.active=== 1){
					this.params.order_status = 'WAIT_PAY'
				} else if(this.active=== 2){
					this.params.order_status = 'WAIT_SHIP'
				} else if(this.active=== 3){
					this.params.order_status = 'WAIT_ROG'
				}else if(this.active=== 4){
					this.params.order_status = 'WAIT_COMMENT'
				}else if(this.active=== 5){
					this.params.order_status = 'REFUND'
				}else if(this.active=== 0){
					this.params.order_status = 'ALL'
				}
				this.loading =false
				this.izreturn = true
			},
			type(newVal) {
				this.type = parseInt(newVal)
				this.active = parseInt(newVal)
			}
		},
		onLoad(e) {
			// if(e.type){
			// 	this.active = parseInt(e.type),
			// 	this.type = parseInt(e.type)
			// }
			if(e.type){
				this.active = parseInt(e.type)
			}
			this.izreturn = true
		},
		onShow() {
			const pages = getCurrentPages()
			const currPage = pages[pages.length - 1]  // 当前页
			if(currPage.data.refresh){
				currPage.data.refresh=0
			}
			// this.upCallback()
		},
		
		methods:{
			/*下拉刷新的回调 */
			downCallback() {
				// this.params.keyword = ''
				this.params.page_no =1
				this.mescroll.resetUpScroll()
			},
			upCallback(page) {
				activity_API.getTourOrderList(this.params).then(res =>{
					this.searchStatus = true
					this.mescroll.endSuccess(res.data.length)
					if(this.params.page_no ==1) this.orderList = []
					this.orderList = this.orderList.concat(res.data)
					this.params.page_no+=1
				}).catch(()=>{
					this.mescroll.endErr();
				})
			},
			//点击空布局按钮的回调
			emptyClick(){
				uni.showToast({
					title:'点击了按钮,具体逻辑自行实现'
				})
			},
			goOrderDetail(sn){
				uni.navigateTo({
					url:'./orderDetail?sn='+sn+'&active='+this.active
				})
			},
			checkOrderStatus(order){
				switch(order.order_status){
					case 'CONFIRM':
					return "等待买家付款"
					case 'PAID_OFF':
					return "等待卖家发货"
					case 'SHIPPED':
					return "卖家已发货"
					case 'ROG':
					return "买家已收货"
					case 'COMPLETE':
					return '已完成'
					case 'CANCELLED':
					return '订单已取消'
					case 'AFTER_SERVICE':
					return "售后处理中"
					default:
					return ""
				}
			},
			
			showModal(sn){
				this.selextedSN = sn
				this.cancelshowModal = true
			},
			hideModal(){
				this.cancelshowModal = false
			},
			handleCancel(e){
				this.cancelReason =  e.currentTarget.dataset.target
			},
			RadioChange(e) {
				this.radio = e.detail.value
			},
			checkGiftDesc(gift_desc){
				let gDesc = JSON.parse(gift_desc)
				let descList = []
				gDesc.map((key,index) =>{
					if(key.key == index+1){
						descList.push(key.value)
					}
				})
				let Str = descList.join('\n')
				Str = Str.replace(/\n/g,"<br/>")
				return Str
			}
		}
	}
</script>

<style lang="scss">
.fixed{
	position: fixed;
	z-index: 19999;
	top:0
}	
.list{
  height: 93vh;
}
.list .item{
  display: flex;
  border-bottom: 1px solid #EDEDED;
  padding: 0 16px;
  height: 95px;
  align-items: center;
}
.loading-text {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 60upx;
	color: #979797;
	font-size: 24upx;	
}
.list .label{
  flex: 0 0 auto;
  padding:10px 0;
}
.list .content{
  flex-grow: 1;
  display:flex;
}
.list .content image{
  flex: 0 0 auto;
  height: 76px;
  width: 76px;
  padding-right:10px;
}
.list .content .text{
  flex-grow: 1;
  font-size: 14px;
}
.list .content .title{
  overflow: hidden;
}
.list .content .spec{
  font-size: 12px;
  color: #333333;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  line-height: 24px;    
  max-height: 24px;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.list .content .price{
  display: flex;
  font-size: 16px;
}
.list .content .price text:nth-child(1){
  color: #ff5f19;
  flex: 1 0 50%;
}
.list .content .price text:nth-child(2){
  color: #999999;
  flex: 1 0 50%;
  text-align: right;
}
/deep/.cu-list.menu>.cu-item:after {
		border-bottom: none;
		height: 60upx;
	}
	/deep/.cu-list.menu>.cu-item  {
	min-height: 80rpx;
	}
	/deep/.cu-list.menu>.cu-item .content>text[class*=cuIcon] {
		width: 18px;
		text-align: left;
	}
.cu-list.card-menu {
margin-right: 20rpx;
margin-left: 20rpx;

}

.empty{
	  width: 100%;
	  height: 85vh;
	  display: flex;
	  justify-content: center;
	  align-cartList: center;
	  color: #666;
	  font-size: 28upx;
	  padding-bottom: 80upx;
}
/deep/.cu-tag.badge {
	border-radius: 200rpx;
	position: relative;
	top: -116rpx;
	right: 10px;
	font-size: 20rpx;
	padding: 0rpx 10rpx;
	height: 28rpx;
	color: #ffffff;
	left: 70rpx;
}
.singlePrice{
	display: flex;
	flex-direction: column;
	margin-left: 10rpx;
}
.activityImg{
	height: 160rpx;
	width: 200rpx;
}
.tips{
	width: 100%;
	display: flex;
	line-height: 36rpx;
}
</style>
